<template>
	<view>
		<detail-top :hospital='work_data.hospital' :createtime="work_data.createtime" :mobile='work_data.mobile' @expand="getMore" />
		<view class="order-de-mo" v-if="isShow">
			<!-- <view :class="['order-de-mo',isShow?'ani-enter':'ani-leave']" v-if="isShow"> -->
			<view class="order-de-mo-s">

			</view>
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					工单号
				</view>
				<view class="order-de-c-c-f-r">
					{{work_data.workID}}
				</view>
			</view>
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					报修时间
				</view>
				<view class="order-de-c-c-f-r">
					{{work_data.createtime}}
				</view>
			</view>
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					审核时间
				</view>
				<view class="order-de-c-c-f-r">
					{{work_data.examinetime||'暂无信息'}}
				</view>
			</view>
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					设备名称
				</view>
				<view class="order-de-c-c-f-r">
					{{work_data.equipment.name||'暂无信息'}}
				</view>
			</view>
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					型号
				</view>
				<view class="order-de-c-c-f-r">
					{{work_data.equipment.marking||'暂无信息'}}
				</view>
			</view>
			<!-- <view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					系统编号
				</view>
				<view class="order-de-c-c-f-r">
					{{work_data.system_number||'暂无信息'}}
				</view>
			</view> -->
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					软件版本
				</view>
				<view class="order-de-c-c-f-r">
					{{work_data.equipment.software_version||'暂无信息'}}
				</view>
			</view>
			<view class="order-de-c-c-f flex-colu">
				<view class="order-de-c-c-f-l" style="margin-bottom: 28rpx;">
					问题描述
				</view>
				<view class="order-de-c-c-f-r">
					{{work_data.describe}}
				</view>
				<view style="margin: 28rpx 0;">
					<image :src="item" @tap="tapPre(index)" v-for="(item,index) in work_data.images" :key='index'></image>
				</view>
			</view>
			
		</view>


		<view class="detailNav">
			<view :class="['detailNav-item',navId==item.id?'active':'']" @tap="choiceNav(item.id,item.url)"
				v-for="(item,index) in detailNav" :key='index'>
				{{item.title}}
			</view>
		</view>
		
		<!-- 通知报价按钮 -->
		<view class="baojia" v-if="work_data.project_status" :style="work_data.project_note == 1 ? 'background-color: #e7e7e7; color: black;' : '' " @tap=" work_data.project_note != 1 ? baojiaBtn() : ''">通知报价</view>
		
		
		<!-- 申请结单按钮 -->
		<view v-if="work_data.id" class="jiedan" :style="Number(work_data.final_price) > 0 ? '' : 'background-color: #e7e7e7; color: black;'"  @tap="isBJBtn ? jumpJiedan() : ''">
			<block v-if="work_data.type_data==1">
				{{work_data.status==0?'提交服务报告':(work_data.status==3?'已提交服务报告':(work_data.status==2)?'已发起申请':'提交服务报告')}}
			</block>
			<block v-else>
				{{work_data.service.status==0?'提交维修报告服务':(work_data.service.status==1?'已提交维修报告服务':(work_data.service.status==2)?'已发起申请':'提交维修报告服务')}}
			</block>
		</view>
		<!-- 查看结单信息 -->
		<view class="finash" :style="Number(work_data.final_price) > 0 ? '' : 'background-color: #e7e7e7; color: black;'" @tap="isBJBtn ? jiedanInfo() : ''">
			查看已结单信息
		</view>
		<!-- 底部内容 -->
		<view class="all-box">

			<view class="survey" v-if="surveyList.length>0">
				<view class="survey-box" v-for="(item,index) in surveyList" :key='index'>
					<view v-if="navId == 7" class="create-time">
						<image src="../../static/detail/engineer-icon.png"></image>
						<text>[采购人员]{{item.admin.nickname || ''}}在{{item.add_time_text}}申请</text>
					</view>
					<view v-else class="create-time">
						<image src="../../static/detail/engineer-icon.png"></image>
						<text>[工程师]{{item.user.nickname}}在{{item.createtime}}创建</text>
					</view>
					<view class="survey-content">
						<!-- 勘察 维修   保养-->
						<block v-if="navId==1||navId==5||navId==6">
							<view :class="['survey-desp',item.height_more?'tetx_more':'']">
								{{item.result||item.repair||item.maintain}}
								<text class="detail_text" @tap.stop="textMore(index)">
									{{item.height_more?'详情':'收缩'}}
								</text>
							</view>
							<view class="survey-video"
								style="display: flex;justify-content:flex-start;flex-wrap: wrap;align-items: center;">
								<video v-if="item.multiMedia.video" :src="item.multiMedia.video"
									style="width: 120rpx;height: 120rpx;border-radius: 4rpx;margin-right: 36rpx;margin-top: 24rpx;"></video>
								<image :src="item1" v-for="(item1,index1) in item.multiMedia.imgs" :key='index1'
									@tap="previewImageAll(index1,index)"
									style="width: 120rpx;height: 120rpx;border-radius: 4rpx;margin-right: 36rpx;margin-top: 24rpx;">

								</image>
							</view>
						</block>
						<!-- 成本 -->
						<block v-else-if="navId==2">
							<view class="cost">
								<image v-if="item.status==1" src="../../static/shenhe.png" class="shenhe" />
								<view class="cost-item">
									类目：<text class="cost-item-border">{{item.cost_category_id}}</text>
								</view>
								<view class="cost-item">
									有无发票：<text class="cost-item-border">{{item.billing_data==0?'有':'无'}}</text>
								</view>
								<view class="cost-item">
									报销金额：<text class="cost-item-border">{{item.money}}元</text>
								</view>
							</view>
							<view class="explain">
								<view class="explain-title">
									成本说明
								</view>
								<view class="explain-content">
									{{item.explain}}
								</view>
							</view>
						</block>
						<!-- 报价 -->
						<block class="offer" v-else-if="navId==3">
							<view class="order-sc-b-c-p-c">
								<block v-for="item2 in item.substance" :key="item.id">

									<view class="order-pri-a">
										名称：<text class="order-pri-b">{{item2.name}}</text>
									</view>
									<view class="order-pri">
										<view class="order-pri-a">
											报价：<text class="order-pri-b">{{item2.money}}元</text>
										</view>
										<view class="order-pri-a">
											数量：<text class="order-pri-b">{{item2.number}}件</text>
										</view>
									</view>
								</block>
								<!-- <view class="order-pri-a">
									名称：<text class="order-pri-b">成本溢价</text>
								</view>
								<view class="order-pri">
									<view class="order-pri-a">
										报价：<text class="order-pri-b">1399.00元</text>
									</view>
									<view class="order-pri-a">
										数量：<text class="order-pri-b">1件</text>
									</view>
								</view> -->
							</view>
							<view class="order-sc-b-c-p-a">
								<image src="../../static/detail/price.png"></image>
								<text>价格金额为：{{item.money}}元</text>
							</view>
						</block>
						<!-- 方案 -->
						<block v-else-if="navId==4">
							<view style="padding-right: 70rpx;" :class="['survey-desp',item.height_more?'tetx_more':'']">
								{{item.project}}
								<text class="detail_text" @tap.stop="textMore(index)">
									{{item.height_more?'详情':'收缩'}}
								</text>
							</view>
							<view class="survey-video"
								style="display: flex;justify-content:flex-start;flex-wrap: wrap;align-items: center;">
								<video v-if="item.multiMedia.video" :src="item.multiMedia.video"
									style="width: 120rpx;height: 120rpx;border-radius: 4rpx;margin-right: 36rpx;margin-top: 24rpx;"></video>
								<image :src="item1" v-for="(item1,index1) in item.multiMedia.imgs" :key='index1'
									@tap="previewImageAll(index1,index)"
									style="width: 120rpx;height: 120rpx;border-radius: 4rpx;margin-right: 36rpx;margin-top: 24rpx;">
							
								</image>
							</view>
						</block>
						<block v-else-if="navId==7">
							<view class="cost">
								<view class="cost-item">
									名称：<text v-if="item.inventory" class="cost-item-border">{{ item.inventory.name }}</text>
								</view>
							</view>
							<view class="cost">
								<view class="cost-item">
									库存分类：<text v-if="item.category" class="cost-item-border">{{ item.category.name }}</text>
								</view>
								<view class="cost-item">
									数量：<text class="cost-item-border">{{ item.num || 0 }}</text>
								</view>
							</view>
							<view class="cost">
								<view class="cost-item">
									采购接单时间：<text class="cost-item-border"> {{ item.accept_time_text }}</text>
								</view>
							</view>
							<view class="cost">
								<view class="cost-item">
									采购到货时间：<text class="cost-item-border">{{ item.arrived_time_text }}</text>
								</view>
							</view>
							<view class="cost">
								<view class="cost-item">
									存放位置：<text v-if="item.inventory" class="cost-item-border">{{  item.inventory.address }}</text>
								</view>
							</view>
							<view class="cost">
								<view class="cost-item">
									采购状态：<text v-if="item.inventory" class="cost-item-border">{{ item.status_text }}</text>
								</view>
							</view>
							<view class="survey-video"
								style="display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;">
								<image :src="item1" v-for="(item1, index1) in item.image" :key='index1'
									style="width: 120rpx;height: 120rpx;border-radius: 4rpx;margin-right: 36rpx;margin-top: 24rpx;">
								</image>
							</view>
						</block>
					</view>
				</view>
			</view>


			<view v-else
				style="margin: auto;display: flex;flex-direction: column;align-items: center;margin-top: 100rpx;font-size: 24rpx;color: #B6BDBD;">
				<image src="../../static/empty.png" style="width: 150rpx;height: 200rpx;margin-bottom: 20rpx;">
				</image>
				<text>什么也没有哦...</text>
			</view>
		</view>
		<button-btm @click="btnJump">
			{{btmTitle}}
		</button-btm>
	</view>
</template>
<script>
	import detailTop from '@/components/detailTop/detailTop.vue'
	import buttonBtm from '@/components/button-btm.vue'
	export default {
		components: {
			detailTop,
			buttonBtm
		},

		data() {
			return {
				costTypeList: [], //成本类目
				height_more: false, //文本详情展开
				viede_list: '', //视频
				imgs_list: [], //图片
				id: null, //工单id
				isShow: false, //详情 的展开
				btmTitle: '添加勘察记录', //底部按钮名称
				work_data: {}, //订单详情数据
				navId: 1, //tabbar id
				detailNav: [{
						id: 1,
						title: '勘察',
						url: '/warranty/surveyList'
					}, {
						id: 2,
						title: '成本',
						url: '/warranty/costList'
					},
					/* {
					id: 3,
					title: '报价',
					url: '/warranty/offerList'
					}, */
					{
						id: 4,
						title: '内部方案',
						url: '/warranty/projectList'
					}, {
						id: 5,
						title: '维修记录',
						url: '/warranty/repairList'
					}, {
						id: 6,
						title: '保养',
						url: '/warranty/maintainList'
					}, {
						id: 7,
						title: '采购记录',
						url: '/warranty/purchaseLog'
					}
				],
				surveyList: [], //底部列表
				page: 1, //分页
				last_page: 1,
				isBtn: true,
				isBJBtn: false
			}
		},

		watch: {

		},

		onLoad(e) {
			this.id = e.id //工单id
			this.getCostType()
			/* 默认 底部列表数据请求 */
			/* 	this.getDufalt() */
		},
		onShow() {
			/* 获取工单详情 */
			this.getWordDetail()
			/* 返回页面 刷新   底部列表数据请求 */
			let onShowGetLisst = this.detailNav.find(item => {
				return item.id == this.navId
			})
			this.page = 1,
				this.surveyList = [],
				this.imgs_list = [],
				this.viede_list = ''
			this.getList(onShowGetLisst.url)
		},
		methods: {
			tapPre(i) {
				uni.previewImage({
					count: i,
					urls: this.work_data.images
				})
			},
			/*  点击tabbar  */
			choiceNav(id, url) {
				this.navId = id; //修改tabbar样式
				this.page = 1; //页码归一
				this.surveyList = []; //数组归一
				this.viede_list = ''; //视频列表归一
				this.imgs_list = []; //图片列表归一
				this.getList(url); //底部数据请求
				switch (this.navId) {
					case 1:
						this.btmTitle = '添加勘察记录';
						break;
					case 2:
						this.btmTitle = '成本申报';
						break;
					case 3:
						this.btmTitle = '添加报价';
						break;
					case 4:
						this.btmTitle = '添加新方案';
						break;
					case 5:
						this.btmTitle = '添加维修方案';
						break;
					case 6:
						this.btmTitle = '添加保养方案';
						break;
					case 7:
						this.btmTitle = '申请采购';
						break;
				};

			},
			/* 获取工单详情  上面部分 */
			getWordDetail() {
				this.$https.post('/warranty/details', {
					warranty_id: this.id /* 工单id*/
				}).then(res => {
					this.work_data = res.data
					console.log('this.work_data', this.work_data)
					if(Number(this.work_data.final_price) > 0){
						this.isBJBtn = true
					}
					// if (this.work_data.images) { //存在照片或视频
					// 	let images = this.work_data.images.split(',') //字符串转数组  获取照片和视频
					// 	this.work_data.imgs = []
					// 	images.forEach(item3 => {
					// 		this.work_data.imgs.push(item3)
					// 	})
					// }
				})
			},
			/* 顶部展开详情 */
			getMore() {
				this.isShow = !this.isShow
			},
			/* 底部文本详情展开 */
			textMore(index) {
				console.log(111);
				this.surveyList = Array.from(this.surveyList)
				this.surveyList[index].height_more = !this.surveyList[index].height_more
			},
			/* 首次进入页面 默认勘察列表数据获取 */
			getDufalt() {
				/* 默认 底部列表数据请求 */
				this.$https.post('/warranty/surveyList', {
					warranty_id: this.id,
					/*, 工单id*/
					page: this.page //分页
				}).then(res => {
					if (res.data.last_page > 0) {
						this.last_page = res.data.last_page
						if (res.data.data.length > 0) {

							this.surveyList = this.surveyList.concat(res.data.data)

						}
					}
				})
			},
			/* 图片预览 */
			previewImageAll(chilIndex, parIndex) {
				uni.previewImage({
					current: chilIndex, //预览图片的下标
					urls: this.surveyList[parIndex].multiMedia.imgs //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			/* 获取成本类目 */
			getCostType() {
				this.$https.post('/warranty/costType').then(res => {
					this.costTypeList = res.data
				})
			},
			/* 底部列表数据请求 */
			getList(url) {
				this.$https.post(url, {
					warranty_id: this.id,
					/*, 工单id*/
					page: this.page //分页
				}).then(res => {
					/* res.data.list报价数据格式   res.data.data其他四个数据格式 */
					if (this.navId == 3) {
						if (res.data.list.last_page > 0) {
							this.last_page = res.data.list.last_page
							if (res.data.list.data.length) {
								this.surveyList = this.surveyList.concat(res.data.list.data)
							}
						}
					} else {
						if (res.data.last_page > 0) {
							this.last_page = res.data.last_page
							if (res.data.data.length) {
								this.surveyList = this.surveyList.concat(res.data.data)
								if (this.surveyList.length > 0) {

									this.surveyList.forEach((item, index) => {

										let height_more = true
										item.height_more = height_more
										if (item.cost_category_id) {
											let obj = this.costTypeList.find(item2 => {
												return item2.id == item.cost_category_id
											})
											item.cost_category_id = obj.name
										}
										item.multiMedia = {
											imgs: [],
											video: ''
										}
										if (item.images) { //存在照片或视频
											let images = typeof item.images === 'string' ? item.images.split(',') : item.images;
											images.forEach(item3 => {
												if (item3 != '') {
													if (this.judgmentFile(item3)) {
														item.multiMedia.video = item3
													} else {
														item.multiMedia.imgs.push(item3)
													}
												}
											})
										}
										if (item.image) {
											let images = typeof item.image === 'string' ? item.image.split(',') : item.image;
											item.image = images.filter(Boolean)
										}
									})
								}
							}
						}
					}
				})
			},
			/* 判断是否为视频文件 */
			judgmentFile(picUrl) {

				let filename = picUrl; //文件路径地址
				let index1 = filename.lastIndexOf(".");
				let index2 = filename.length;
				let postf = filename.substring(index1, index2); //获取文bai件后缀名duzhi
				//判断文件后缀名是否等于视频文件的后缀名
				if (postf === ".avi" || postf === ".mp4" || postf === ".rmvb") {
					return true
				} else {
					return false
				}
			},
			/* 底部按钮 跳转 */
			btnJump() {
				if (this.navId == 7) { 
					console.log(this.navId)
					uni.navigateTo({
						url: "/pages/purchase/addPurchase?id=" + this.id
					})
				} else {
					/* nav_id tabbarid   id工单id   service_id维修id  */
					uni.navigateTo({
						url: '../addRecord/addRecord?nav_id=' + this.navId + '&id=' + this.id + '&service_id=' + this.work_data.service.id
					})
				}
			},
			/* 通知报价 */
			baojiaBtn(){
				if(this.isBtn){
					this.isBtn = false
					this.$https.post('/warranty/project_note', {warranty_id: this.id}).then(res => {
						console.log(res)
						if(res.code == 1){
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							this.getWordDetail()
							this.isBtn = true
						}
					})
				}
			},
			
			/* 结单 */
			jumpJiedan() {
				/*  warranty_id 工单id    service_id维修id
				 */
				if (this.work_data.service.status == 0 || this.work_data.service.status == 3) {
					uni.navigateTo({
						url: '../statement/statement?warranty_id=' + this.work_data.id + '&service_id=' + this
							.work_data.service.id
					})
				} 
				
			},
			/* 维修页面  */
			jiedanInfo(){
				uni.navigateTo({
					url: '../report/report?id=' + this.work_data.id
				})
			}
		},
		onReachBottom() {
			if (this.page != this.last_page) {
				this.page = this.page + 1
				let obj = this.detailNav.find(item => item.id == this.navId)
				this.getList(obj.url)
			}
		},
	}
</script>
<style lang="scss" scoped>
	.baojia{
		z-index: 999999;
		position: fixed;
		right: 0rpx;
		top: 700rpx;
		
		font-size: smaller;
		background-color: #1a66ff;
		color: #FFFFFF;
		padding: 10rpx 5rpx 10rpx 20rpx;
		border-radius: 20rpx 0 0 20rpx;
	}
	
	.finash {
		z-index: 999999;
		position: fixed;
		right: 0rpx;
		top: 800rpx;
		font-size: smaller;
		background-color: #1a66ff;
		color: #FFFFFF;
		padding: 10rpx 5rpx 10rpx 20rpx;
		border-radius: 20rpx 0 0 20rpx;
	}

	.flex-colu {
		z-index: 99999 !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;

		image {
			width: 150rpx;
			height: 150rpx;
			display: inline-block;
			margin-right: 10rpx;
			border-radius: 10rpx;
		}
	}

	.tetx_more {
		overflow: hidden;
		text-overflow: clip;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.detail_text {
		position: absolute;
		right: 0rpx;
		bottom: 0rpx;
		background-color: #FFFFFF;
		width: 80rpx;
		text-align: center;
		z-index: 99999;
		color: $public-oclor;
		font-size: 24rpx;
		text-decoration: underline;
		text-decoration-color: $public-oclor;
	}

	.programme {
		padding: 28rpx 14rpx;
		background-color: #f6f7fb;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #B6BDBD;
		line-height: 48rpx;
	}

	.order-sc-b-c-p-a {
		height: 80rpx;
		background: #F6F6FB;
		font-size: 24rpx;
		font-weight: 500;
		color: #F24C17;
		line-height: 80rpx;
		margin-top: 14rpx;
		display: flex;
		align-items: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 20rpx;
		}
	}

	.order-pri {
		display: flex;

		&-a {
			color: #969699;
			font-size: 24rpx;


		}

		&-b {
			color: #000000;
		}
	}

	.order-sc-b-c-p-c {
		padding: 16rpx 26rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #969699;
		background-color: #f6f7fb;
		line-height: 36rpx;
		position: relative;
	}

	.order-sc-b-c-p-c>.order-pri:nth-child(2) {
		padding: 24rpx 0 38rpx;
		color: teal;
	}

	.order-sc-b-c-p-c>.order-pri>.order-pri-a:nth-child(1) {
		padding-right: 150rpx;
		position: relative;
	}

	.order-sc-b-c-p-c>.order-pri>.order-pri-a:nth-child(1)::before {
		content: '';
		width: 4rpx;
		height: 100%;
		position: absolute;
		right: 75rpx;
		background-color: rgba(0, 0, 0, 0.06);
	}

	.order-sc-b-c-p-c>.order-pri-a:nth-child(3) {
		padding: 34rpx 0 24rpx;
		border-top: 2rpx solid rgba(0, 0, 0, 0.06);
	}

	.cost {
		display: flex;
		margin-bottom: 25rpx;
		position: relative;

		.shenhe {
			position: absolute;
			width: 144rpx;
			height: 144rpx;
			right: 70rpx;
			top: -65rpx;
		}

		.cost-item {
			font-size: 24rpx;
			font-weight: 400;
			color: #969699;
			padding-right: 30rpx;

			.cost-item-border {
				color: #000000 !important;
			}
		}
	}

	.explain {
		&-title {
			font-size: 24rpx;
			font-weight: 500;
			color: #303030;
			margin-bottom: 22rpx;
		}

		&-content {
			background: #F6F6FB;
			border-radius: 8rpx;
			padding: 24rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #B6BDBD;
		}
	}
	

	.jiedan {
		    z-index: 9999999999999999999999999;
		    position: fixed;
		    right: 0rpx;
		    top: 900rpx;
			
		    font-size: smaller;
		    background-color: #1a66ff;
		    color: #FFFFFF;
		    padding: 10rpx 5rpx 10rpx 20rpx;
		    border-radius: 20rpx 0 0 20rpx;
	}

	.all-box {
		padding: 0 34rpx 200rpx;

	}

	.survey-box {
		border-radius: 8rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.04);
		margin-top: 20rpx;
	}

	.create-time {
		font-size: 24rpx;
		font-weight: 500;
		color: #3B3D3D;
		background: #F5F6F8;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
		padding: 16rpx;
		display: flex;
		align-items: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.survey-content {
		padding: 18rpx;
	}

	.survey-desp {
		font-size: 24rpx;
		font-weight: 500;
		color: #B6BDBD;
		position: relative;
	}

	.survey-desp::after {
		position: relative;
		right: 0rpx;
		bottom: 0rpx;
		content: '';
		width: 50rpx;
		height: 20rpx;
	}

	.survey-video {}

	.active {
		font-weight: 600 !important;
		color: #141414 !important;
		position: relative;
	}

	.active::after {
		content: '';
		width: 8rpx;
		height: 8rpx;
		position: absolute;
		bottom: -14rpx;
		left: 50%;
		margin-left: -35rpx;
		border-radius: 50%;
		background-color: $public-oclor;
	}

	.active::before {
		content: '';
		width: 54rpx;
		height: 8rpx;
		position: absolute;
		bottom: -14rpx;
		left: 50%;
		margin-left: -27rpx;
		border-radius: 8rpx;
		background-color: $public-oclor;
	}

	.detailNav {
		margin: 36rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 40rpx;
		box-sizing: border-box;

		&-item {
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #969699;
			width: 80rpx;
		}
	}





	.order-sc {
		&-b {
			background-color: #FFFFFF;
			padding: 62rpx 48rpx;

			&-c {
				position: relative;
				padding-bottom: 32rpx;

				&-p {
					&-a {
						height: 80rpx;
						background: #F6F6FB;
						font-size: 24rpx;
						font-weight: 500;
						color: #F24C17;
						line-height: 80rpx;
					}
				}

				&-t {
					display: flex;
					justify-content: space-between;
					position: relative;

					&-l {
						font-size: 24rpx;
						font-weight: 500;
						color: #303030;
					}

					&-r {
						font-size: 20rpx;
						font-weight: 400;
						color: #969699;
					}
				}

				/* &-t::before {
					content: '';
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					top: 0px;
					left: -32rpx;
					border-radius: 50%;
					background-color: #C6C7CB;
				} */

				&-c {
					margin: 16rpx 0 0rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #969699;
					line-height: 36rpx;
					position: relative;

					&-p {
						color: $public-oclor;
						border-bottom: 2rpx solid $public-oclor;
					}
				}

				&-f {
					padding: 0 32rpx;

					&-t {
						font-size: 24rpx;
						font-weight: 500;
						color: $public-oclor;
						line-height: 24rpx;
						margin: 28rpx 0 26rpx;
					}

					&-i {

						&-i {
							width: 160rpx;
							height: 160rpx;
							background-color: #F5F6F8;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				/* &-c::before {
					content: '';
					width: 6rpx;
					height: 100rpx;
					position: absolute;
					top: -10rpx;
					left: -22rpx;
					background: #C6C7CB;
				} */
			}

			&-c::before {}



			&-c::after {}
		}
	}


	.ani-enter {

		animation: enter .5s;
	}

	.ani-leave {
		animation: leave .5s;
	}

	.order-de-mo {
		border-top: 16rpx solid #f7f8fb;
		position: relative;
		border-bottom: 20rpx solid #f5f6f8;

		&-s {
			position: absolute;
			top: -16rpx;
			left: 40rpx;
			border-left: 20rpx solid transparent;
			border-right: 20rpx solid transparent;
			border-top: 20rpx solid $public-oclor;
		}
	}

	@keyframes enter {
		from {
			transform: translateY(-308rpx);
		}

		to {
			transform: translateY(0rpx);
		}
	}

	@keyframes leave {
		from {
			transform: translateY(308rpx);
		}

		to {
			transform: translateY(0rpx);
		}
	}

	.order-de {
		&-c {
			background-color: #f7f8fb;
			border-bottom: 28rpx solid #f7f8fb;

			&-m {
				font-size: 28rpx;
				font-weight: 400;
				color: #969699;
				line-height: 33rpx;
				padding: 28rpx 32rpx;

			}

			&-c {
				background-color: #FFFFFF;

				&-f {
					display: flex;
					justify-content: space-between;
					padding: 28rpx 32rpx;
					align-items: center;
					border-bottom: 2rpx solid #f7f8fb;

					&-l {
						font-size: 28rpx;
						font-weight: 500;
						color: #3B3D3D;
					}

					&-r {
						font-size: 24rpx;
						font-weight: 400;
						color: #3B3D3D;
					}
				}
			}
		}


		&-x {
			padding: 0 32rpx;

			&-c {
				&-a {
					font-size: 28rpx;
					font-weight: 500;
					color: #3B3D3D;
					margin: 20rpx 0 28rpx;
				}

				&-b {
					font-size: 24rpx;
					font-weight: 400;
					color: #3B3D3D;
					margin-bottom: 32rpx;
				}

				&-c {
					padding-bottom: 42rpx;

					&-i {
						width: 160rpx;
						height: 160rpx;
						background-color: #f5f6f8;
						margin-right: 16rpx;
						display: inline-block;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.or-hi {
		width: 6rpx;
		height: 100%;
		position: absolute;
		top: 10rpx;
		left: -25rpx;
		background: #C6C7CB;
	}

	.or-hi::before {
		content: '';
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: -5rpx;
		left: -8rpx;
		border-radius: 50%;
		background-color: #C6C7CB;
	}


	.order-sc-b-c:nth-child(1) .or-hi {
		color: $public-oclor !important;
		background-color: $public-oclor !important;
	}

	.order-sc-b-c:nth-child(1) .or-hi::before {
		background-color: $public-oclor !important;
		border: 2rpx solid #fff;
	}

	.order-sc-b-c-p-c {
		background: #F6F7FB;
		padding: 16rpx;

		.order-pri {
			display: flex;

			&-a {
				color: #969699;
				font-size: 24rpx;


			}

			&-b {
				color: #000000;
			}
		}
	}

	.order-sc-b-c-p-c>.order-pri:nth-child(2) {
		padding: 24rpx 0 38rpx;
		color: teal;
	}

	.order-sc-b-c-p-c>.order-pri>.order-pri-a:nth-child(1) {
		padding-right: 150rpx;
		position: relative;
	}

	.order-sc-b-c-p-c>.order-pri>.order-pri-a:nth-child(1)::before {
		content: '';
		width: 4rpx;
		height: 100%;
		position: absolute;
		right: 75rpx;
		background-color: rgba(0, 0, 0, 0.06);
	}

	.order-sc-b-c-p-c>.order-pri-a:nth-child(3) {
		padding: 34rpx 0 24rpx;
		border-top: 4rpx solid rgba(0, 0, 0, 0.06);
	}
</style>
